<template>
  <el-card class="page-order">
    <div slot="header">商品统计</div>
    <!-- 搜索框 -->
    <div class="search-box">
      时间范围
      <el-date-picker size="mini" v-model="date"
        value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
      <el-button @click="getData" size="mini" type="primary">查询</el-button>
    </div>

    <!-- 思路1 有数据才显示 v-if 解决异步问题 -->
    <!-- <chart-bar v-if="Object.keys(chartData).length" :chart-data='chartData'>
    </chart-bar> -->

    <!-- 思路2 子组件监听数据变化才渲染 -->
    <chart-bar :chart-data='chartData'>
    </chart-bar>
  </el-card>
</template>

<script>
import { getOrderTotalReq } from "@/api/order";
import { formatYMDhms } from "@/filters";

import ChartBar from "./ChartBar.vue";
export default {
  components: {
    ChartBar,
  },
  data() {
    return {
      date: [],
      //表格数据
      chartData: {},
    };
  },
  methods: {
    async getData() {
      let res = await getOrderTotalReq({
        date: JSON.stringify(this.date),
      });

      //解构数据
      let { data } = res.data;
      //处理数据
      let xData = data.map((v) => formatYMDhms(v.orderTime));
      let series = [
        {
          type: "bar",
          name: "金额数据",
          data: data.map((v) => v.orderAmount),
        },
      ];

      //数据赋值
      this.chartData = { xData, series };
      console.log("this.chartData :>> ", this.chartData);

      //画图
      // this.renderLine({
      //   xData,
      //   series,
      //   title: "金额图表",
      // });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
</style>
